@use '../style/base' as *;

@include bem(avatar) {
  @include b() {
    @include universal;
    justify-content: center;
    align-items: center;
    flex-grow: 0;
    flex-shrink: 0;
    width: var(--sar-avatar-width);
    height: var(--sar-avatar-height);
    font-size: var(--sar-avatar-font-size);
    background-color: var(--sar-avatar-bg);
  }

  @include e(image) {
    @include universal;
    width: 100%;
    height: 100%;
  }

  @include m(circle) {
    border-radius: var(--sar-rounded-full);
  }

  @include m(square) {
    border-radius: var(--sar-avatar-square-border-radius);
  }
}
